<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <el-input v-model="deptName" placeholder="请输入组织名称" clearable
                  size="small" prefix-icon="el-icon-search" @keyup.enter.native="handleSelectOrgCode"
        />
        <el-tree style="margin-top: 20px"
                 :data="deptAndHotelTree"
                 :filter-node-method="filterNode"
                 :expand-on-click-node="false"
                 ref="tree"
                 default-expand-all
                 @node-click="handleNodeClick"
        />
      </el-col>

      <el-col :span="20" :xs="24">
        <el-row :gutter="10">
          <!--          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">-->
          <!--            <span style="font-weight: bold">{{ clickHotelName }}房间总数:</span>{{ homeList.length }}-->
          <!--          </el-col>-->
          <!--          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">-->
          <!--            <span>设备总数</span>({{ deviceTotal }})-->
          <!--          </el-col>-->
          <!--          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">-->
          <!--            <span >在线数</span>({{ deviceOnlineTotal }})-->
          <!--          </el-col>-->
          <!--          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">-->
          <!--            <span >离线离网</span>({{ deviceOfflineAndOffNetTotal }})-->
          <!--          </el-col>-->
          <div>
            <span><span style="font-weight: bold">{{ clickHotelName }} </span>房间总数</span>({{ homeList.length }})
            <span>设备总数</span>({{ deviceTotal }})
            <span>在线数</span>({{ deviceOnlineTotal }})
            <span>离线数</span>({{ deviceOfflineTotal }})
            <span>离网数</span>({{ deviceOffNetTotal }})
            <span>未关数</span>({{ deviceUnCloseTotal }})
          </div>
        </el-row>

        <el-form label-width="68px" :inline="true" @submit.native.prevent v-if="false">
          <el-form-item label="房间名称">
            <el-input clearable v-model="searchHomeName"
                      @keyup.enter.native="getHomeByAccountAndOrgCode(selectedAccount,selectedOrgCode,searchHomeName)"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini"
                       @click="getHomeByAccountAndOrgCode(selectedAccount,selectedOrgCode,searchHomeName)"
                       v-hasPermi="['hotel:room:query']"
            >搜索
            </el-button>
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['hotel:room:export']"
            >导出
            </el-button>
          </el-form-item>
        </el-form>

        <el-divider/>

        <template v-if="homeList.length>0">
          <template v-for="(home,homeIndex) in homeList">
            <el-col :span="4.5" style="margin-top: 10px">
              <el-card shadow="hover" class="myCardStyle" style="width: calc(8vw);color: white;"
                       :class="[home.unCloseDeviceCount>0?'unCloseStyle':'defaultBackgroundColor']"
              >
                <div @click.stop="handleDetailsView(home)">
                  <div solt="header">
                    <el-tooltip class="item" effect="dark" :content="home.homeName+'房'" placement="top-start">
                      <span style="font-weight: bold" class="spanStyle">{{ home.homeName }}房</span>
                    </el-tooltip>
                    <div style="float: right">
                      <el-tooltip class="item" effect="dark" :content="home.hotelOrderNum+''" placement="top-start">
                        <div @click.stop="handleChangeOrderNum(home)">
                          <i class="el-icon-edit"/>
                        </div>
                      </el-tooltip>
                    </div>
                  </div>
                  <el-divider/>
                  <el-row>
                    <div v-if="false"><span style="font-weight: bold">全部设备</span> {{ home.deviceTotalCount }}</div>
                    <div v-if="false"><span style="font-weight: bold">未关设备</span> {{ home.unCloseDeviceCount }}</div>
                    <el-row style="font-size: 13px">
                      <div><span>在线</span>
                        <span> {{ home.onlineCountList[0] }}</span>
                      </div>

                      <div style="margin-top: 4px;"><span>离线</span>
                        <span>{{ home.onlineCountList[1] }}</span>
                      </div>

                      <div style="margin-top: 4px;"><span>离网</span>
                        <span>{{ home.onlineCountList[2] }}</span>
                      </div>

                      <div style="margin-top: 4px" v-if="true">
                        <span v-if="false">{{ home.unCloseDeviceCount }}<span>个设备未关</span></span>
                        <span v-if="true"><span>未关</span>
                      <span>{{ home.unCloseDeviceCount }}</span></span>
                      </div>
                    </el-row>
                    <el-row v-if="false">
                      <div @click.stop="handleChangeOrderNum(home)"><span style="font-weight: bold">排序</span>
                        {{ home.hotelOrderNum }}
                      </div>
                    </el-row>
                  </el-row>
                </div>
              </el-card>

            </el-col>
          </template>
        </template>
        <template v-else>
          <el-table :data="[]"></el-table>
        </template>
      </el-col>
    </el-row>

    <el-dialog :title="detailDialogTitle" :visible.sync="detailDialogOpen" width="1100px" append-to-body
               :before-close="beforeDetailClose"
    >
      <div slot="title">
        <el-row>
          <div style="float: left;margin-top: 8px;margin-left: 10px;font-weight: bold">
            {{ detailDialogTitle }}
          </div>
          <div style="float: right;margin-top: 8px;margin-right: 100px;font-weight: bold">刷新倒计时: {{ freshTime }}</div>
        </el-row>
      </div>

      <!--  显示网关信息  -->
      <template v-if="detailsDialogGatewayList.length>0">
        <el-descriptions :column="4" :label-style="{'font-weight': 'bold'}">
          <el-descriptions-item label="网关名称">
            <el-popover trigger="hover" placement="top-start">
              <img :src="detailsDialogGatewayList[0].imgUrl" alt="" style="width: 100px;height: 100px">
              <span slot="reference">
                    {{ detailsDialogGatewayList[0].name }}
                  </span>
            </el-popover>
          </el-descriptions-item>
          <el-descriptions-item label="网关MAC">{{ detailsDialogGatewayList[0].zigbeeMac }}</el-descriptions-item>
          <el-descriptions-item label="自动入网">
            <template v-if="detailsDialogGatewayList[0].zdrwbz==='Y'">
              <div class="myTagOpen">是</div>
            </template>
            <template v-else>
              <div class="myTagClose">否</div>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="是否布防">
            <template v-if="detailsDialogGatewayList[0].defendStatus==='01'">
              <div class="myTagOpen">是</div>
            </template>
            <template v-else>
              <div class="myTagClose">否</div>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="软件版本">
            {{ strInsert(detailsDialogGatewayList[0].softwareVersionNumber, 1, '.') }}
          </el-descriptions-item>
          <el-descriptions-item label="硬件版本">
            {{ strInsert(detailsDialogGatewayList[0].hardwareVersionNumber, 1, '.') }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ detailsDialogGatewayList[0].createTime }}</el-descriptions-item>
          <el-descriptions-item label="上报时间">{{ detailsDialogGatewayList[0].switchTime }}</el-descriptions-item>
          <el-descriptions-item label="网关位置">{{ detailsDialogGatewayList[0].address }}</el-descriptions-item>
        </el-descriptions>
      </template>
      <template v-else>
        暂无网关
      </template>
      <el-divider/>

      <!--  场景和设备  -->
      <el-row :gutter="20">
        <!-- 场景-->
        <el-col :span="7">
          <el-form label-width="68px" :inline="true" @submit.native.prevent>
            <el-form-item label="场景名称">
              <el-input size="small" style="width: 100px" v-model="sceneDetailQueryParams.sceneName" clearable
                        @keyup.enter.native="getSceneListByHomeId"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="getSceneListByHomeId"
                         v-hasPermi="['hotel:room:sceneQuery']"
              >搜索
              </el-button>
            </el-form-item>
          </el-form>
          <el-row>
            <el-col :span="18">
              <template v-if="detailsDialogSceneList.length>0">
                <el-table :data="detailsDialogSceneList" height="350">
                  <el-table-column label="场景名称" prop="sceneName" min-width="80" :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      <el-popover trigger="hover" placement="bottom">
                        <div style="width: 300px">
                          <el-descriptions :column="1">
                            <el-descriptions-item label="场景名称">{{ scope.row.sceneName }}</el-descriptions-item>
                            <el-descriptions-item label="场景编号">{{ scope.row.code }}</el-descriptions-item>
                          </el-descriptions>
                        </div>
                        <span slot="reference">
                              {{ scope.row.sceneName }}
                            </span>
                      </el-popover>
                    </template>

                  </el-table-column>
                  <el-table-column label="编号" width="50" prop="code" v-if="false"/>
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="60">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-caret-right"
                        @click="controlScene(scope.row)"
                        v-hasPermi="['hotel:room:sceneExecute']"
                      >执行
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  :total="sceneDetailTotal"
                  layout="total,prev,next,jumper"
                  :page-size="sceneDetailPageSize"
                  @current-change="handleSceneCurrentPageChange"
                />
              </template>
              <template v-else>
                暂无场景
              </template>
            </el-col>
          </el-row>
        </el-col>

        <!--设备-->
        <el-col :span="17">
          <el-form label-width="68px" :inline="true" @submit.native.prevent>
            <el-form-item label="设备名称">
              <el-input v-model="deviceDetailQueryParams.deviceName" size="small" clearable
                        @keyup.enter.native="getDeviceListByHomeId"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="getDeviceListByHomeId"
                         v-hasPermi="['hotel:room:deviceQuery']"
              >搜索
              </el-button>
            </el-form-item>
          </el-form>

          <template v-if="detailsDialogDeviceList.length>0">
            <el-table :data="detailsDialogDeviceList" height="350" @sort-change="handleDeviceSort" border>
              <el-table-column label="设备名称" prop="deviceName" :show-overflow-tooltip="true" width="140">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="bottom">
                    <div style="width: 300px">
                      <el-descriptions :column="1">
                        <el-descriptions-item label="设备类型">{{ scope.row.deviceType }}</el-descriptions-item>
                        <el-descriptions-item label="类型名称">{{ scope.row.defaultDeviceName }}</el-descriptions-item>
                        <el-descriptions-item label="设备MAC">{{ scope.row.deviceMac }}</el-descriptions-item>
                      </el-descriptions>
                    </div>
                    <span slot="reference">
                          {{ scope.row.deviceName }}
                        </span>
                  </el-popover>
                </template>
              </el-table-column>

              <el-table-column label="在网状态" width="80" align="center">
                <template slot-scope="scope">
                  <template v-if="scope.row.lwbz==='0'">
                    <template v-if="scope.row.onlineType!=='3'">
                      <template v-if="scope.row.diffTime > (scope.row.onlineTime * 60)">
                        <div class="myTagOffline">离线</div>
                      </template>
                      <template v-else>
                        <div class="myTagOnline">在线</div>
                      </template>
                    </template>
                  </template>
                  <template v-else>
                    <div class="myTagOffNet">离网</div>
                  </template>
                </template>
              </el-table-column>

              <el-table-column label="设备状态" prop="actions" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                  <div v-html="fetchStatus(scope.row.actions,scope.row.deviceType)">
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="上报时间" prop="switchTime" :show-overflow-tooltip="true" sortable="custom"
                               width="160"
              />

              <el-table-column prop="actions" :show-overflow-tooltip="true" v-if="false" width="100">
                <template slot-scope="scope">
                  {{ scope.row.actions }}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :total="deviceDetailTotal"
              layout="total,prev,next,jumper"
              :page-size="deviceDetailPageSize"
              @current-change="handleCurrentPageChange"
            />
          </template>
          <template v-else>
            暂无设备
          </template>
        </el-col>
      </el-row>
    </el-dialog>

    <!--修改排序-->
    <el-dialog :title="changeOrderNumTitle" :visible.sync="changeOrderNumOpen" width="400px" append-to-body>
      <el-form ref="changeOrderForm" :model="changeOrderForm" label-width="100px" :rules="changeOrderFormRules">
        <el-form-item label="显示排序：" prop="orderNum">
          <el-input-number v-model="changeOrderForm.orderNum" controls-position="right" :min="0"/>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitChangeOrderNum">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


import { listDept } from '@/api/system/dept'
import {
  checkAppUserToken,
  exportHotelDeviceCount,
  getHotelDeviceCount,
  listAccountAuthorize
} from '@/api/system/accountAuthorize'
import { addChildrenToTree } from '@/utils/ruoyi'
import { fetchStatus, getDeviceListByHomeId } from '@/api/system/device'
import { getGatewayListByHomeId } from '@/api/system/gateway'
import { getSceneListByHomeId, triggerScene } from '@/api/system/scene'
import { updateHomeHotelOrderNum } from '@/api/system/home'

export default {
  name: 'index',
  data() {
    return {
      // 部门与酒店树
      deptAndHotelTree: undefined,
      deptName: undefined,

      // 当前酒店所绑定的用户手机号
      selectedAccount: undefined,
      // 当前酒店所绑定的用户组织编码
      selectedOrgCode: undefined,
      // 搜索的家庭名称
      searchHomeName: undefined,
      //家庭列表
      homeList: [],
      // 当前选择的家庭ID
      selectedHomeId: null,
      // 当前选择的家庭名称
      selectedHomeName: null,

      // 详情对话框的标题
      detailDialogTitle: '',
      // 详情对话框是否显示
      detailDialogOpen: false,
      // 详情页的网关列表
      detailsDialogGatewayList: [],
      // 详情页的场景列表
      detailsDialogSceneList: [],
      // 详情页的设备列表
      detailsDialogDeviceList: [],
      // 设备分页数据
      deviceDetailPageNum: 1,
      deviceDetailPageSize: 20,
      deviceDetailTotal: 0,
      // 场景分页数据
      sceneDetailPageNum: 1,
      sceneDetailPageSize: 20,
      sceneDetailTotal: 0,

      // 设备查询参数
      deviceDetailQueryParams: {
        pageNum: 1,
        pageSize: 20,
        homeId: undefined,
        deviceName: undefined,
        orderBySwitchTime: undefined
      },
      // 场景查询参数
      sceneDetailQueryParams: {
        pageNum: 1,
        pageSize: 20,
        homeId: undefined,
        sceneName: undefined
      },

      // 页面刷新定时器毫秒时间
      timeMillisecond: 5000,

      // 房间列表定时器
      timer: '',
      // 单个房间详情页定时器
      timer2: '',

      // 单个房间详情刷新倒计时定时器
      time3: '',
      // 刷新倒计时计数
      freshTime: 5,

      // 修改排序对话框
      changeOrderNumOpen: false,
      changeOrderNumTitle: undefined,
      changeOrderForm: {
        homeId: undefined,
        orderNum: 1
      },

      changeOrderFormRules: {
        orderNum: [
          { required: true, message: '显示排序不能为空', trigger: 'blur' }
        ]
      },

      // 当前点击的酒店名称
      clickHotelName: ''
    }
  },
  created() {
    this.getTreeselect()
  },

  // 销毁页面之前清空定时器
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timer2)
    clearInterval(this.timer3)
  },

  watch: {
    // 若当前家庭列表发生变化, 则重新请求设备列表
    // homeList(value) {
    //   // 查询设备
    //   for (let i = 0, len = value.length; i < len; i++) {
    //     getDeviceListByHomeId({ homeId: value[i].homeId }).then(response => {
    //       value[i].deviceTotalCount = response.total
    //       value[i].onlineCountList = this.getOnlineDeviceCountList(response.rows)
    //     })
    //   }
    // }
  },
  computed: {
    // 设备总数
    deviceTotal() {
      let total = 0
      for (let i = 0, len = this.homeList.length; i < len; i++) {
        total += this.homeList[i].deviceTotalCount
      }

      return total
    },

    // 设备在线总数
    deviceOnlineTotal() {
      let total = 0
      for (let i = 0, len = this.homeList.length; i < len; i++) {
        total += this.homeList[i].onlineCountList[0]
      }

      return total
    },

    // 设备离线总数
    deviceOfflineTotal() {
      let total = 0
      for (let i = 0, len = this.homeList.length; i < len; i++) {
        total += this.homeList[i].onlineCountList[1]
      }

      return total
    },

    // 设备离网总数
    deviceOffNetTotal() {
      let total = 0
      for (let i = 0, len = this.homeList.length; i < len; i++) {
        total += this.homeList[i].onlineCountList[2]
      }

      return total
    },

    // 设备未关总数
    deviceUnCloseTotal() {
      let total = 0
      for (let i = 0, len = this.homeList.length; i < len; i++) {
        total += this.homeList[i].unCloseDeviceCount
      }

      return total
    }
  },
  methods: {
    fetchStatus,
    /** 查询部门下拉树结构 */
    getTreeselect() {
      // 查询部门列表
      listDept({ status: '0' }).then(response => {
        let deptList = response.data

        // 添加树节点的显示标签
        for (let i = 0, len = deptList.length; i < len; i++) {
          deptList[i].label = deptList[i].deptName
          deptList[i].id = deptList[i].deptId
          deptList[i].isHotel = false
        }

        let deptTree = this.handleTree(deptList)

        // 查询酒店列表, 将其加入组织树中
        listAccountAuthorize({ status: '0' }).then(response => {
          let hotelList = response.rows
          // 添加树节点的显示标签
          for (let i = 0, len = hotelList.length; i < len; i++) {
            hotelList[i].label = hotelList[i].name
            hotelList[i].isHotel = true
          }

          // 给树添加节点
          for (let i = 0, len = hotelList.length; i < len; i++) {
            addChildrenToTree(deptTree, 'id', hotelList[i].deptId, hotelList[i])
          }

          this.deptAndHotelTree = deptTree
        })
      })
    },

    // 节点单击事件
    handleNodeClick(data) {
      //清空定时器
      clearInterval(this.timer)

      // 若点击的点击的是酒店
      if (data.isHotel) {
        this.clickHotelName = data.name
        let token = data.token
        checkAppUserToken({ token }).then(response => {
          if (response.code === 200) {
            this.selectedAccount = response.data.account
            this.selectedOrgCode = response.data.orgCode
            this.searchHomeName = undefined

            this.getHomeByAccountAndOrgCode(this.selectedAccount, this.selectedOrgCode, this.searchHomeName)
          }
        })

        this.timer = setInterval(this.getHomeByAccountAndOrgCode, this.timeMillisecond)
      } else {
        this.clickHotelName = ''
        this.homeList = []
      }
      // this.queryParams.orgCode = data.orgCode
      // this.handleQuery()
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    handleSelectOrgCode() {
      this.$refs.tree.filter(this.deptName)
      // this.handleQuery()
    },

    /**
     * 查询用户的家庭列表
     * @param account
     * @param orgCode
     * @param homeName
     */
    getHomeByAccountAndOrgCode(account, orgCode, homeName) {
      getHotelDeviceCount({
        account: this.selectedAccount,
        orgCode: this.selectedOrgCode,
        homeName: this.searchHomeName
      }).then(homeResponse => {
        this.homeList = []
        for (let i = 0, len = homeResponse.data.length; i < len; i++) {
          this.homeList.push({
            homeId: homeResponse.data[i].homeId,
            homeName: homeResponse.data[i].homeName,
            deviceTotalCount: homeResponse.data[i].deviceTotal,
            onlineCountList: [homeResponse.data[i].onlineDeviceCount, homeResponse.data[i].offlineDeviceCount, homeResponse.data[i].offNetDeviceCount],
            unCloseDeviceCount: homeResponse.data[i].unCloseDeviceCount,
            hotelOrderNum: homeResponse.data[i].hotelOrderNum
          })
        }
      })
    },

    /**
     * 查询家庭下的设备列表
     */
    getDeviceListByHomeId() {
      return getDeviceListByHomeId(this.deviceDetailQueryParams).then(response => {
        this.detailsDialogDeviceList = response.rows
        this.deviceDetailTotal = response.total
      })
    },

    /**
     * 查询家庭下的场景列表
     */
    getSceneListByHomeId() {
      getSceneListByHomeId(this.sceneDetailQueryParams).then(response => {
        this.detailsDialogSceneList = response.rows
        this.sceneDetailTotal = response.total
      })
    },

    /**
     * 获取设备的在线、离线、离网数量
     * @param deviceList 设备数组
     * @returns {number[]} 数组, 分布为在线、离线、离网数量
     */
    getOnlineDeviceCountList(deviceList) {
      let countArr = [0, 0, 0]
      for (let i = 0, len = deviceList.length; i < len; i++) {
        if (deviceList[i].lwbz === '0') {
          // 只统计强弱电设备
          if (deviceList[i].onlineTime && deviceList[i].onlineTime !== 0) {
            if (deviceList[i].diffTime > (deviceList[i].onlineTime * 60)) {
              countArr[1]++
            } else {
              countArr[0]++
            }
          }
        } else {
          countArr[2]++
        }
      }

      return countArr
    },

    /**
     * 点击家庭详情
     */
    handleDetailsView(home) {
      if (home) {
        this.selectedHomeId = home.homeId
        this.selectedHomeName = home.homeName
        this.deviceDetailQueryParams.homeId = home.homeId
        this.sceneDetailQueryParams.homeId = home.homeId
      }

      // 查询网关
      getGatewayListByHomeId({ homeId: this.selectedHomeId }).then(response => {
        this.detailsDialogGatewayList = response.rows
      })

      // 查询场景
      getSceneListByHomeId(this.sceneDetailQueryParams).then(response => {
        this.detailsDialogSceneList = response.rows
        this.sceneDetailTotal = response.total
      })

      // 查询设备
      getDeviceListByHomeId(this.deviceDetailQueryParams).then(response => {
        this.detailsDialogDeviceList = response.rows
        this.deviceDetailTotal = response.total
      })

      this.detailDialogTitle = this.selectedHomeName + '的详情'
      this.detailDialogOpen = true

      this.setDetailTimer()
      this.freshTime = this.timeMillisecond / 1000
      this.setFreshTimer()
    },

    /**
     * 数字字符串每隔几位插入一个分隔符
     * @param str
     * @param length
     * @param separator
     * @returns {*}
     */
    strInsert(str, length, separator) {
      if (str == null) {
        return ''
      }
      let reg = new RegExp('\\d{1,' + length + '}', 'g')
      let ma = str.match(reg)
      return ma.join(separator)
    },

    /**
     * 执行场景
     */
    controlScene(row) {
      this.$confirm('是否执行场景?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let sceneId = row.id
        triggerScene({ sceneId: sceneId }).then(response => {
          if (response.code === 200) {
            this.msgSuccess('执行成功')
          }
        })
      }).catch(function() {
      })
    },

    /**
     * 设备数据修改分页的页面, prev, next, jumper都会调用该函数
     * @param currentPage 跳转后的页码
     */
    handleSceneCurrentPageChange(currentPage) {
      this.sceneDetailQueryParams.pageNum = currentPage
      this.getSceneListByHomeId()
    },

    /**
     * 设备上报时间排序
     */
    handleDeviceSort(event) {
      // 转换排序的字符串, 将其转为sql中的形式
      let orderType = null
      if (event.order) {
        orderType = event.order === 'ascending' ? 'asc' : 'desc'
      }

      //先清空之前的排序
      this.deviceDetailQueryParams.orderBySwitchTime = undefined

      // 设置查询参数中相应的排序标识字段
      if (event.prop === 'switchTime') {
        this.deviceDetailQueryParams.orderBySwitchTime = orderType
      }

      this.getDeviceListByHomeId()
    },

    /**
     * 设备数据修改分页的页面, prev, next, jumper都会调用该函数
     * @param currentPage 跳转后的页码
     */
    handleCurrentPageChange(currentPage) {
      this.deviceDetailQueryParams.pageNum = currentPage
      this.getDeviceListByHomeId()
    },

    /** 导出按钮操作 */
    handleExport() {
      this.$confirm('是否确认导出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return exportHotelDeviceCount({
          account: this.selectedAccount,
          orgCode: this.selectedOrgCode,
          homeName: this.searchHomeName
        })
      }).then(response => {
        this.download(response.msg)
      }).catch(function() {
      })
    },

    /**
     * 对话框确认关闭
     */
    closeDialogConfirm() {
      this.$confirm('确认关闭?').then(() => {
        this.changeOrderNumOpen = false
      }).catch(() => {
      })
    },

    // 点击排序
    handleChangeOrderNum(home) {
      this.changeOrderForm.homeId = home.homeId
      this.changeOrderForm.orderNum = home.hotelOrderNum
      this.changeOrderNumTitle = home.homeName + '房'
      this.changeOrderNumOpen = true
    },

    // 确定按钮, 提交修改排序
    submitChangeOrderNum() {
      updateHomeHotelOrderNum(this.changeOrderForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess('修改成功')
          this.getHomeByAccountAndOrgCode()
        }

        this.changeOrderNumOpen = false
      })
    },

    // 取消按钮
    cancel() {
      this.changeOrderNumOpen = false
    },

    // 设置详情页定时器
    setDetailTimer() {
      this.timer2 = setInterval(() => {
        // 查询网关
        getGatewayListByHomeId({ homeId: this.selectedHomeId }).then(response => {
          this.detailsDialogGatewayList = response.rows
        })

        // 查询场景
        getSceneListByHomeId(this.sceneDetailQueryParams).then(response => {
          this.detailsDialogSceneList = response.rows
          this.sceneDetailTotal = response.total
        })

        // 查询设备
        getDeviceListByHomeId(this.deviceDetailQueryParams).then(response => {
          this.detailsDialogDeviceList = response.rows
          this.deviceDetailTotal = response.total
        })
      }, this.timeMillisecond)
    },

    // 设置倒计时定时器
    setFreshTimer() {
      this.timer3 = setInterval(() => {
        if (this.freshTime === 1) {
          this.freshTime = this.timeMillisecond / 1000
        } else {
          this.freshTime--
        }
      }, 1000)
    },

    // 房间详情页关闭前
    beforeDetailClose() {
      clearInterval(this.timer2)
      clearInterval(this.timer3)
      this.detailDialogOpen = false
    }
  }
}
</script>
<style lang="scss" scoped>

> > > .myTagOpen {
  border-radius: 5px;
  padding: 2px 4px;
  color: white;
  background-color: #1EC290;
  font-size: 10px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

> > > .myTagClose {
  border-radius: 5px;
  padding: 2px 4px;
  color: white;
  background-color: #999999;
  font-size: 10px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

> > > .myTagLight {
  border-radius: 5px;
  padding: 2px 4px;
  color: white;
  background-color: #327CFF;
  font-size: 10px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.myCardStyle {
  width: 200px;
}

.myTagOnline {
  border-radius: 5px;
  padding: 2px 4px;
  color: white;
  background-color: #1EC290;
  font-size: 10px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.myTagOffline {
  border-radius: 5px;
  padding: 2px 4px;
  color: white;
  background-color: #FF6804;
  font-size: 10px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.myTagOffNet {
  border-radius: 5px;
  padding: 2px 4px;
  color: white;
  background-color: #FF3600;
  font-size: 10px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.unCloseStyle {
  background-color: #e09f53;
}

.defaultBackgroundColor {
  background-color: #226551;
}

.spanStyle {
  white-space: nowrap; /*强制span不换行*/
  display: inline-block; /*将span当做块级元素对待*/
  width: 60px; /*限制宽度*/
  overflow: hidden; /*超出宽度部分隐藏*/
  text-overflow: ellipsis; /*超出部分以点号代替*/
  line-height: 0.9; /*数字与之前的文字对齐*/
}

.el-table__row > td {
  border: none;
}

.el-table::before { //去掉最下面的那一条线
  height: 0px;
}

.el-divider {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
